<script lang="ts">
export default {
  name: "engineerList"
}
</script>
<script setup lang="ts">
import {
  computed,
  reactive,
  ref,
  watchEffect,
  onMounted,
  getCurrentInstance,
  toRefs,
} from 'vue';

import {
  ElTree,
  ElForm,
  ElMessageBox,
  ElMessage,
  UploadFile,
  ElTreeSelect,
} from 'element-plus';

import {
  Search,
  Plus,
  Refresh,
  Delete,
  Download,
  Top,
  UploadFilled,
} from '@element-plus/icons-vue';
import selectEngineer from '@/views/order/components/selectEngineer.vue';
import {engineerAdd, engineerUpdate, getEngineerForm, listEngineerPages,engineerImport, getOverallBalance, freezeEdit} from '@/api/engineer/index';
import {EngineerQuery, EngineerType, Freeze} from "@/api/engineer/types"
import {listServiceTypeOptions} from "@/api/service-type";
import {listServiceTypeLabelOptions} from "@/api/service-type-label";
import { casualCheckRecordAdd ,creditscoreRecord,creditscoreEdit,invitationalevision} from '@/api/system/examineRecord/index';
import { FormRecordQuery } from '@/api/system/examineRecord/types';

const emit = defineEmits(['engineerClick']);
const refEngineer = ref();
const queryFormRef = ref(ElForm); // 查询表单
const dataFormRef = ref(ElForm); // 用户表单

const size = ref('Large' as string)

const {proxy}: any = getCurrentInstance();

const state = reactive({
  // 遮罩层
  loading: false,
  buttonloading: false,
  // 选中数组
  ids: [] as number[],
  // 总条数
  total: 0,
  tableData:[],
  dialogVisible:false,
  dialogVisibleScore:false,
  dialogVisibleFreeze: false,
  engineerList: [] as EngineerType[],
  dialog: {
    visible: false,
  } as DialogType,
  formScore:{} as FormRecordQuery,
  freezeForm: {} as Freeze,
  formData: {
    status:1
  } as EngineerType,
  // 性别下拉项
  genderOptions: [] as OptionType[],
  excelFilelist:[] as [],
  serviceTypeOptions: [] as OptionType[],
  categoryTypeOptions:[
    {
      label:'自聘',
      value:'employment'
    },
    {
      label:'非自聘',
      value:'notemployment'
    },
    {
      label:'外部',
      value:'without'
    },
  ],
  serviceTypeLabelOptions: [
    {
      value: '1',
      label: 'Level one 1',
      children: [
        {
          value: '1-1',
          label: 'Level two 1-1',
          children: [
            {
              value: '1-1-1',
              label: 'Level three 1-1-1',
            },
          ],
        },
      ],
    },
  ] as OptionType[],
  importDialog: {
    title: '用户导入',
    visible: false,
  } as DialogType,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  } as EngineerQuery,
  excelFile: undefined as any,
  rules: {
    engineerRealname: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
    engineerSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    typeIds: { required: true, message: '请选择服务类型', trigger: 'blur' },
    idcard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    category: [{ required: true, message: '请选择用工类别', trigger: 'change' }],
    freeze: [{ required: true, message: '请输入冻结余额', trigger: 'change' }],
    phone: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ],
  },
  overallBalanceInfo:{} as any
});

let {
  ids,
  loading,
  genderOptions,
  serviceTypeOptions,
  serviceTypeLabelOptions,
  queryParams,
  formData,
  formScore,
  freezeForm,
  engineerList,
  total,
  dialog,
  rules,
  excelFilelist,
  dialogVisible,
  dialogVisibleScore,
  importDialog,
  tableData,
  categoryTypeOptions,
  buttonloading,
  overallBalanceInfo,
  dialogVisibleFreeze
} = toRefs(state);


async function overallBalance() {
  let res:any = await getOverallBalance()
  if (res.code == '00000') {
    overallBalanceInfo.value = res.data
  }else{
    ElMessage.error(res.data)
  }
}
function submitOk(parma:any) {
  console.log(parma);
  invitationalevision({engineerId:parma.order_id,yqEngineerId:parma.engineer_ids}).then((res:any)=>{
    if (res.code == '00000') {
      ElMessage.success(res.data)
      refEngineer.value.dialog.visible = false;
      resetQuery();
    }else{
      ElMessage.error(res.data)
    }
  })
}
/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  state.queryParams.status==2
  listEngineerPages(state.queryParams).then(({ data }) => {
    state.engineerList = data.list;
    state.total = data.total;
    state.loading = false;
  });
}
function queryScore(row:any){
  creditscoreRecord({id:row.id}).then((res:any)=>{
    if (res.code == '00000') {
      state.dialogVisible = true
      state.tableData = res.data
    }
  })
}
function handleClose(){
  state.dialogVisible = false
  state.dialogVisibleScore = false
  state.dialogVisibleFreeze = false
  state.formScore = {
    type: '',
    engineerId: '',
    scoreLess: '',
    reason: ''
  }
}
function selectPeople(row: any) {
  refEngineer.value.dialog.visible = true;
  refEngineer.value.formData = row;
  refEngineer.value.canAdd = false;
  refEngineer.value.reset();
  refEngineer.value.dialog.title = '选择邀请人';
}
/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}

async function showImportDialog() {
  importDialog.value.visible = true;
}
function handleSelectionChange(selection: any) {
  state.ids = selection.map((item: any) => item.id);
}

function handleRowClick(row: any) {
  emit('engineerClick', row);
}

async function handleAdd() {
  dialog.value = {
    title: '新增用户',
    visible: true,
  };
  state.formData.status = 0
  //await getServiceTypeOptions();
}

/**
 * 修改信用分
 */
function handleUpdateScore(row:any){
  state.formScore.engineerId = row.id
  state.dialogVisibleScore = true
}


/**
 * 冻结余额
 */
 function handleFreeze(row:any){
  state.freezeForm.engineerId = row.id
  state.freezeForm.balance = row.balance
  state.freezeForm.freezeBalance = row.freezeBalance
  state.dialogVisibleFreeze = true
}
/**
 * 修改
 */
async function handleUpdate(row: any) {
  const engineerId = row.id;
  state.dialog = {
    title: '修改用户',
    visible: true,
  };
    state.formData = Object.assign({},row);
    state.formData.typeIds = row.typeIds?row.typeIds.split(','):[]
    serviceTypeChange(state.formData.typeIds as any[])
    state.formData.labelIds = row.labelIds?row.labelIds.split(','):[]
    state.formData.engineerSex = row.engineerSex?row.engineerSex.toString():''
}

function disableEn(row: any) {
    let dis = row.isDisable === 1 ? 0 : 1
    let parma:any = {id: row.id, isDisable: dis};
    engineerUpdate(parma).then((res) => {
      ElMessage.success('修改成功');
      handleQuery();
    })
 }

function handleSubmit() {
  let parma:EngineerType = {...state.formData,labelIds:state.formData.labelIds.toString(),typeIds:state.formData.typeIds.toString()}
  console.log("formData---->", parma)
  loading.value = true;
  dataFormRef.value.validate((valid: any) => {
   if (valid) {
     if (state.formData.id) {
       engineerUpdate(parma).then(() => {
         ElMessage.success('修改成功');
         closeDialog();
         handleQuery();
       })
     } else {
       engineerAdd(parma).then(() => {
         ElMessage.success('新增成功');
         closeDialog();
         handleQuery();
       });
     }
   }
  });
}
function submitImportForm(){
  if (!state.excelFile) {
    ElMessage.warning('上传Excel文件不能为空');
    return false;
  }
  state.buttonloading = true
  engineerImport({file :state.excelFile }).then((res:any)=>{
    console.log(res);
    state.buttonloading = false
    if (res.code == '00000') {
      state.excelFile = undefined
      handleQuery()
      ElMessage.success(res.data)
      state.importDialog.visible = false
    }else{
      ElMessage.warning(res.data)
    }

  })
}

/**
 * 取消
 */
function closeDialog() {
  dialog.value.visible = false;
  dataFormRef.value.resetFields();
  dataFormRef.value.clearValidate();
}

/**
 * 获取性别下拉项
 */
function getGenderOptions() {
  proxy.$listDictItemsByTypeCode('gender').then((response: any) => {
    state.genderOptions = response?.data;
  });
}
async function getServiceTypeOptions() {
  listServiceTypeOptions().then((response) => {
    state.serviceTypeOptions = response.data;
  });
}

async function serviceTypeChange(typeList: number[]) {
  console.log(typeList)
  if(typeList.length) {
    let serviceTypeLabelList: OptionType[] = []
    for (const el of typeList) {
      let children: OptionType[] = [];
      await listServiceTypeLabelOptions(el).then((response) => {
        children = response?.data as OptionType[];
      })
      serviceTypeLabelList.push(...children)
    }
    state.serviceTypeLabelOptions = serviceTypeLabelList;
  } else {
    state.serviceTypeLabelOptions = []
  }
}
function handleExcelChange(file : UploadFile){
  if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
    ElMessage.warning('上传Excel只能为xlsx、xls格式');
    state.excelFile = undefined;
    state.excelFilelist = [];
    return false;
  }
  state.excelFile = file.raw;
}
function closeImportDialog(){
  state.excelFile = undefined
  state.importDialog.visible = false
}
function submitScore(){
  creditscoreEdit(state.formScore).then((res:any)=>{
    console.log(res);
    if (res.code == '00000') {
      ElMessage.success(res.data)
      state.dialogVisibleScore = false
      handleQuery()
    }else{
      ElMessage.error(res.data)
    }

  })
}

function submitFreeze() {
  if(state.freezeForm.freeze > state.freezeForm.balance) {
    ElMessage.error("冻结金额不能大于余额")
    return
  }

  freezeEdit(state.freezeForm).then((res:any)=>{
    console.log(res);
    if (res.code == '00000') {
      ElMessage.success(res.data)
      state.dialogVisibleFreeze = false
      handleQuery()
    }else{
      ElMessage.error(res.data)
    }

  })
}
function handleExamine(row:any){
  ElMessageBox.prompt('备注', '提交审核', {
    confirmButtonText: '确定',
    showCancelButton: false,
    showClose: false,
    inputType: 'textarea',
    inputErrorMessage: '请输入备注',
  }).then(({ value }) => {
    let param = {
      businessId: row.id as number,
      businessType: '2',
      remark: value as string,
    };
    casualCheckRecordAdd(param).then((res) => {
      ElMessage.success('提交审核成功');
      handleQuery()
    });
  });
}

const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap.default,
  }
})

onMounted(() => {
  // 初始化性别字典
  getGenderOptions();
  // 用户列表
  handleQuery();
  getServiceTypeOptions();
  overallBalance()
});
</script>
<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="name" label="姓名">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入姓名进行搜索"
            clearable
            @keyup.enter="handleQuery"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item prop="phone" label="手机号">
          <el-input
            v-model="queryParams.phone"
            placeholder="请输入手机号进行搜索"
            clearable
            @keyup.enter="handleQuery"
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="服务类型">
          <el-select
            v-model="queryParams.typeId"
            placeholder="请选择服务类型"
            clearable
            style="width: 200px"
          >
            <el-option
              v-for="item in serviceTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="服务标签">
          <el-select
            v-model="queryParams.labelId"
            placeholder="请选择服务标签"
            clearable
            style="width: 200px"
          >
            <el-option label="启用" value="1"/>
            <el-option label="禁用" value="0"/>
          </el-select>
        </el-form-item> -->
        <el-form-item label="用户性别" prop="engineerSex">
          <el-select style="width: 200px" v-model="queryParams.engineerSex" clearable placeholder="请选择">
            <el-option label="未知" :value="0" />
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="是否签订合同">
          <el-select
            v-model="queryParams.isContract"
            placeholder="全部"
            clearable
            style="width: 200px"
          >
            <el-option label="是" :value= 1 />
            <el-option label="否" :value= 0 />
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery"
          >搜索
          </el-button
          >
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card>
      <template #header>
        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
        <el-button type="success" :icon="Top" @click="showImportDialog">导入</el-button>
<!--        <el-button-->
<!--          type="danger"-->
<!--          :icon="Delete"-->
<!--          :disabled="ids.length === 0"-->
<!--          @click="handleDelete"-->
<!--        >删除</el-button>-->
      </template>

      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="engineerList"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        border
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="姓名" align="center" prop="engineerRealname" min-width="80" />
        <el-table-column label="性别" align="center" prop="engineerSexName" width="60" />
        <el-table-column label="电话" align="center" prop="phone" width="150" />
        <el-table-column label="用工类别" align="center" prop="categoryName" width="100" />
        <el-table-column label="信用分" align="center" width="150" >
          <template #default="scope">
            <span class="fs" @click="queryScore(scope.row)">{{scope.row.creditScore}}</span>
          </template>
        </el-table-column>
        <el-table-column label="余额" align="center" prop="balance" width="150"/>
        <el-table-column label="总收入" align="center" prop="sumIncome" width="150">
          <template #default="scope">
            <p>{{scope.row.sumIncome ? scope.row.sumIncome : 0}}</p>
          </template>
        </el-table-column>
        <el-table-column label="服务类型" align="center" prop="typeIds" width="150">
          <template #default="scope">
            <p v-if="!scope.row.typeIds">无</p>
            <el-tag style="margin-left: 2px" v-else v-for="item in scope.row.typeName.split(',')" :key="item" >{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="服务标签" align="center" prop="labelIds" width="150">
          <template #default="scope">
            <p v-if="!scope.row.labelIds">无</p>
            <el-tag style="margin-left: 2px" type="warning" v-else v-for="item in scope.row.labelName.split(',')" :key="item" >{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="身份证" align="center" prop="idcard" width="150" />
        <el-table-column label="签订合同" align="center" prop="isContract" width="90">
          <template #default="scope">
            <el-tag v-if="scope.row.isContract === 1" type="success">是</el-tag>
            <el-tag v-else type="info">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cardImgPositive" label="头像" width="170">
          <template #default="scope">
            <!-- <el-image v-if="scope.row.headSculpture" style="width: 140px; height: 100px" :src="'https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.headSculpture" fit="scale-down" :preview-src-list="['https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.headSculpture]" :preview-teleported="true" hide-on-click-modal/> -->
            <el-image v-if="scope.row.headSculpture" style="width: 140px; height: 100px" :src="'http://localhost:9999/file/download?fileId='+scope.row.headSculpture" fit="scale-down" :preview-src-list="['https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.headSculpture]" :preview-teleported="true" hide-on-click-modal/>
            <div v-else style="width: 140px;
              height: 100px;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: white;">无</div>
          </template>
        </el-table-column>
        <el-table-column prop="cardImgPositive" label="证件图片人像" width="170">
          <template #default="scope">
            <!-- <el-image v-if="scope.row.cardImgPositive" style="width: 140px; height: 100px" :src="'https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.cardImgPositive" fit="scale-down" :preview-src-list="['https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.cardImgPositive]" :preview-teleported="true" hide-on-click-modal/> -->
            <el-image v-if="scope.row.cardImgPositive" style="width: 140px; height: 100px" :src="'http://localhost:9999/file/download?fileId='+scope.row.cardImgPositive" fit="scale-down" :preview-src-list="['https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.cardImgPositive]" :preview-teleported="true" hide-on-click-modal/>
            <div v-else style="width: 140px;
              height: 100px;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: white;">无</div>
          </template>
        </el-table-column>
        <el-table-column prop="cardImgNegative" label="证件图片国徽" width="170">
          <template #default="scope">
            <el-image v-if="scope.row.cardImgNegative" style="width: 140px; height: 100px" :src="'https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.cardImgNegative" fit="scale-down" :preview-src-list="['https://lhyg.hollwingroup.com/prod-api/file/download?fileId='+scope.row.cardImgNegative]" :preview-teleported="true" hide-on-click-modal/>
            <div v-else style="width: 140px;
              height: 100px;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: white;">无</div>
          </template>
        </el-table-column>
        <el-table-column label="状态"  align="center" prop="state" width="150">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="info">未审核</el-tag>
            <el-tag v-if="scope.row.status === 1" type="success">审核中</el-tag>
            <el-tag v-if="scope.row.status === 2" >已通过</el-tag>
            <el-tag v-if="scope.row.status === 3" type="warning">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="yqEngineerName"  label="邀请人" align="center" width="160" />
        <el-table-column prop="createTime"  label="创建时间" align="center" width="160" />
        <el-table-column prop="updateTime" label="修改时间" align="center" width="160" />

        <el-table-column fixed="right" label="操作" align="center" width="160">
          <template #default="scope">
            <el-button type="success" link @click.stop="handleExamine(scope.row)" v-if="scope.row.status === 0">
              提交审核
            </el-button>
            <el-button
              type="success"
              link
              @click.stop="handleUpdate(scope.row)"
            >
              修改
            </el-button>
            <el-button
              type="success"
              link
              @click.stop="handleUpdateScore(scope.row)" 
            >
              修改信用分
            </el-button>
            <el-button
              v-if="!scope.row.yqEngineerId"
              type="success"
              link
              @click.stop="selectPeople(scope.row)"
              v-hasPerm="['engineer:inviteUser:add']"
            >
            新增邀请人
            </el-button>
            <el-button
              v-else
              type="success"
              link
              @click.stop="selectPeople(scope.row)"
              v-hasPerm="['engineer:inviteUser:edit']"
            >
              修改邀请人
            </el-button>
            <el-button
              type="success"
              link
              @click.stop="handleFreeze(scope.row)"
            >
              冻结余额
            </el-button>
            <el-button
              type="success"
              link
              @click.stop="disableEn(scope.row)"
            >
              {{ scope.row.isDisable ? '启用' : '禁用'}}
            </el-button>

<!--            <el-button-->
<!--              type="primary"-->
<!--              link-->
<!--              @click.stop=""-->
<!--            >-->
<!--              停用-->
<!--            </el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <el-descriptions
        class="margin-top"
        title=""
        :column="2"
        :size="size"
        :style="blockMargin"
        border
      >
        <el-descriptions-item label="剩余总余额">{{overallBalanceInfo.total_balance_not_reflected || 0 }}</el-descriptions-item>
        <el-descriptions-item label="提现中余额">{{ overallBalanceInfo.withdrawal_balance || 0 }}</el-descriptions-item>
        <el-descriptions-item label="冻结中余额">{{ overallBalanceInfo.freeze_balance || 0 }}</el-descriptions-item>
      </el-descriptions>

      <!-- pagination -->
      <pagination
        v-if="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
  </div>


  <!-- dialog -->
  <el-dialog
    :title="dialog.title"
    v-model="dialog.visible"
    width="600px"
    @close="closeDialog"
  >
    <el-form
      ref="dataFormRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="姓名" prop="engineerRealname">
        <el-input v-model="formData.engineerRealname" placeholder="请输入姓名" />
      </el-form-item>

      <el-form-item label="用户性别" prop="engineerSex">
        <el-select style="width: 200px;" v-model="formData.engineerSex" placeholder="请选择">
          <el-option
            v-for="item in genderOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item label="身份证号" prop="idcard">
        <el-input v-model="formData.idcard" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="用工类别" prop="category">
        <el-select style="width: 200px;" v-model="formData.category" placeholder="请选择用工类别">
          <el-option
            v-for="item in categoryTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="服务类型" prop="typeIds">
        <el-select style="width: 200px;" v-model="formData.typeIds" multiple placeholder="请选择服务类型" @change="serviceTypeChange">
          <el-option
            v-for="item in serviceTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="服务标签" prop="labelIds">
        <el-select style="width: 200px;" v-model="formData.labelIds" multiple placeholder="请选择服务标签" >
          <el-option
            v-for="item in serviceTypeLabelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    :title="importDialog.title"
    v-model="importDialog.visible"
    width="600px"
    append-to-body
    @close="closeImportDialog"
  >
    <el-form
      ref="importFormRef"
      label-width="80px"
    >
      <el-form-item label="Excel">
        <el-upload
          class="upload-demo"
          action=""
          drag
          :auto-upload="false"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          :file-list="excelFilelist"
          :on-change="handleExcelChange"
          :limit="1"
        >
          <el-icon class="el-icon--upload">
            <upload-filled />
          </el-icon>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">xls/xlsx files</div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" :disabled='buttonloading' @click="submitImportForm">确 定</el-button>
        <el-button @click="closeImportDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="dialogVisible"
    title="信用分历史记录"
    width="50%"
    :before-close="handleClose"
  >
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="类型" width="180" >
        <template #default="scope">
          <span :class="scope.row.type=='1'?'jf':'kf'">{{scope.row.type=='1'?'加分':'扣分'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理分数" width="180" >
        <template #default="scope">
          <span>{{scope.row.type=='1'?`+${scope.row.scoreLess}`:`-${scope.row.scoreLess}`}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="处理后分数" />
      <el-table-column prop="orderName" label="原因" />
      <el-table-column prop="createTime" label="更新时间" />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    v-model="dialogVisibleScore"
    title="修改信用分"
    width="30%"
    :before-close="handleClose"
  >
    <el-form :model="formScore" label-width="120px">
      <el-form-item label="处理类型">
        <el-select style="width: 200px;" v-model="formScore.type" placeholder="请选择处理类型">
          <el-option label="加分" value="1" />
          <el-option label="扣分" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="分数">
        <el-input v-model="formScore.scoreLess" />
      </el-form-item>
      <el-form-item label="原因">
        <el-input v-model="formScore.reason" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibleScore = false">取消</el-button>
        <el-button type="primary" @click="submitScore">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    v-model="dialogVisibleFreeze"
    title="冻结余额"
    width="30%"
    :before-close="handleClose"
  >
    <el-form :model="freezeForm" :rules="rules" label-width="120px">
      <el-form-item label="当前余额">
        <el-input v-model="freezeForm.balance" />
      </el-form-item>
      <el-form-item label="已冻结余额">
        <el-input v-model="freezeForm.freezeBalance" />
      </el-form-item>
      <el-form-item label="冻结余额">
        <el-input v-model="freezeForm.freeze" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibleFreeze = false">取消</el-button>
        <el-button type="primary" @click="submitFreeze">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <selectEngineer ref="refEngineer" @submitOk="submitOk" />

</template>


<style scoped>
  .kf{
    color: red;
  }
  .jf{
    color: green;
  }
  .fs{
    color: #409eff;
    cursor: pointer;
  }
</style>
